<template>
	<div class="tree_chose" style="display: inline-block;">
		<el-cascader v-model="value" :options="listarr" :props="props" :show-all-levels="false" @change="handleChange"
			:style="{ width: ww + 'px' }" :placeholder="pltetx">
		</el-cascader>
	</div>
</template>

<script>
	export default {
		name: 'Tree',
		props: {
			mytopid: Number,
			mytxt: String,
			own: Number,
			istxt: Number,
			ww: {
				type: Number, // 比例 min=0 max=1
				default: 300,
			},
		},
		data() {
			return {
				name: this.type,
				value: [],
				listarr: [],
				pltetx: this.mytxt ? this.mytxt : '请选择',
				props: {
					expandTrigger: 'hover',
					value: "id",
					label: 'name',
					checkStrictly: true
				},
			}
		},

		created() {

		},
		mounted() {
			this.GetList();
		},
		methods: {
			handleChange(value) {				
				this.$emit('handleChange', value[value.length - 1]);
			},
			
			findParentIds: function(list, targetId, parentIds = []) {
				let that = this;
				for (let item of list) {
					if (item.id === targetId) {
						parentIds.push(item.id);
						return parentIds;
					}
					if (item.children) {
						const foundIds = that.findParentIds(item.children, targetId, parentIds.concat(item.id));
						if (foundIds) {
							return foundIds;
						}
					}
				}
				return null;
			},			
			
			GetList: function() {
				let that = this;
				let _data = {
					is_tree: 1,
					pid:0,
				};
				that.common.http('GET', 'category/index', _data, function(res) {
					console.log(res)
					that.listarr = res.data;
					if(that.mytopid>0){
						that.value = that.findParentIds(res.data,that.mytopid);
						console.log(that.value);
					}
				});
			},
		}
	}
</script>
<style>
	.tree_chose input::-webkit-input-placeholder {
		color: #333;
	}

	.tree_chose input::-moz-input-placeholder {
		color: #333;
	}

	.tree_chose input::-ms-input-placeholder {
		color: #333;
	}
</style>